<template>
  <div class="p-6">
    <div class="w-full h-full overflow-scroll">
      <el-table
        class="my_table w-full h-full"
        :data="tableData"
        :border="false"
      >
        <el-table-column prop="date" label="币种" width="80" />
        <el-table-column prop="name" label="最新价" width="80" />
        <el-table-column prop="address" label="24H涨幅" />
        <el-table-column prop="address" label="24H振幅" />
        <el-table-column prop="address" label="24H成交额" />
        <el-table-column prop="address" label="1分钟涨幅" />
        <el-table-column prop="address" label="5分钟涨幅" />
        <el-table-column
          fixed="right"
          :align="'center'"
          label="操作"
          width="120"
        >
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick"
              >新增</el-button
            >
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { BrowserWindow, app } from "electron";
import { createApp } from "vue";
import Other from "./other.vue";

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

const handleClick = () => {
  console.log(123);
};

const value = 1;
</script>

<style lang="scss" scoped>
/*最外层透明*/
::v-deep(.el-table),
::v-deep(.el-table__expanded-cell) {
  background-color: transparent !important;
  font-weight: 600;
  color: #fff !important;
}
/* 表格内背景颜色 */
::v-deep(.el-table th),
::v-deep(.el-table tr),
::v-deep(.el-table td) {
  background-color: transparent !important;
  border: 0; //去除表格
}
/*去除底边框*/
::v-deep(.el-table td.el-table__cell) {
  border: 0;
}
::v-deep(.el-table th.el-table__cell.is-leaf) {
  border: 0;
}
/*去除底部灰条.el-table::before*/
::v-deep(.el-table::before) {
  display: none;
}
</style>
